<template>
  <div :style="'height:' + height">
    <iframe
      id="warmChart"
      :src="url"
      style="width: 100%; height: 100%"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getToken } from '@/utils/auth';

// 响应式数据
const height = ref(`${document.documentElement.clientHeight - 94.5}px`);
const url = ref("");
const route = useRoute();
const router = useRouter();

// 处理来自iframe的消息
const handleMessage = (event) => {
  console.log(event.data.method, event);
  if (event.data.method === "close") {
    closePage();
  }
};

// 关闭页面
const closePage = () => {
  router.push({
    path: "/flow/definition",
    query: {
      t: Date.now(),
      pageNum: route.query.pageNum
    }
  });
};

// 主题切换方法（保留但注释）
/*
const handleTheme = (theme) => {
  const iframe = document.getElementById('warmChart');
  if (iframe && iframe.contentWindow) {
    iframe.contentWindow.postMessage({ type: theme }, "*");
  }
};
*/

onMounted(() => {
  // 构建URL
  const baseUrl = `${
    import.meta.env.VITE_APP_BASE_API
  }/work-flow/warm-flow-ui/index.html?id=${
    route.params.id
  }&disabled=${
    route.query.disabled || ''
  }`;

  url.value = `${baseUrl}&Authorization=Bearer ${getToken()}`;

  // 添加消息监听
  window.addEventListener("message", handleMessage);
});

onBeforeUnmount(() => {
  // 清理消息监听
  window.removeEventListener("message", handleMessage);
});
</script>
